<template>
	<view class="text-container">
			<span class="text-content" @click="showDetail">{{ textyl }}</span>
			<text v-if="showMore" class="view-detail" @click="showDetail">展开</text>
			<text v-if="showText&&!showMore" class="view-detail" @click="showShrink">收起</text>
	</view>
</template>

<script lang="ts" setup>
	import {
		ref,
		onMounted,
		watch,
		toRefs, nextTick
	} from "vue";
	const textyl=ref('')
	const showText=ref(false)//收起文字的显示隐藏
	const showMore=ref(false)//判断显示查看或者收起 
	const textlength=ref(false)//判断是否点击详情 true为点击详情 false为点击收起
	const props = defineProps({
		//子组件接收父组件传递过来的值        
		text: String,//内容
		num:{//展示数量
			type:Number,
			default:()=>68
		}
	})
	onMounted(()=>{
		textyl.value=text.value
		checkTextLength()
	})
	// const scrollRef=ref()
	//使用父组件传递过来的值
	const { text,num} = toRefs(props)
const checkTextLength=()=>{
		if (text.value.length >num.value && !textlength.value) {
			showMore.value = true;
			showText.value = false
			textyl.value = text.value.substring(0, num.value) + '...';
		} else {
			showMore.value = false;
			textlength.value = false
			textyl.value = text.value
		}
	}
	const showDetail=()=>{
		if (showMore) {
			textlength.value = true
			showText.value= true
			checkTextLength()
		}
	}
	const showShrink=()=>{
		if (showText) {
			textlength.value = false
			checkTextLength()
		}
	}
</script>

<style>
	.view-detail{
		margin-left: 12rpx;
		font-size: 24rpx;
		color:#007cff;
	}
</style>

